import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong.dart';
import 'components/logistics_timeline.dart';

class LogisticsPage extends StatelessWidget {
  final Map<String, dynamic> logisticsInfo = {
    'expressCompany': '申通快递',
    'trackingNumber': '7511266366963366',
    'expectedDeliveryDate': '预计今天送达',
    'address': '广东省广州市大华区明离路科技园880号',
    'timeline': [
      {
        'status': '派送中',
        'desc': '您的订单正在派送中【深圳市】科技园派送员宋平正在为您派件',
        'time': '今天 10:25',
      },
      {
        'status': '运输中',
        'desc': '在广东深圳公司进行发出扫描',
        'time': '昨天 10:25',
      },
      {
        'status': '运输中',
        'desc': '在分拣中心广东深圳公司进行卸车扫描',
        'time': '昨天 10:25',
      },
      {
        'status': '运输中',
        'desc': '在北京市丰台区转运',
        'time': '昨天 10:25',
      },
      {
        'status': '运输中',
        'desc': '在北京市进行下级地点扫描',
        'time': '昨天 10:25',
      },
    ],
  };

  LogisticsPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        elevation: 0,
        leading: IconButton(
          icon: const Icon(Icons.arrow_back_ios, size: 20),
          onPressed: () => Navigator.pop(context),
          color: const Color(0xFF333333),
        ),
        title: const Text(
          '派送中',
          style: TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.w500,
            color: Color(0xFF333333),
          ),
        ),
        centerTitle: true,
      ),
      body: Column(
        children: [
          // 地图区域
          Container(
            height: 240,
            color: Colors.white,
            child: Stack(
              children: [
                FlutterMap(
                  options: MapOptions(
                    center: LatLng(22.5431, 114.0579), // 深圳坐标
                    zoom: 13,
                  ),
                  children: [
                    TileLayer(
                      urlTemplate:
                          'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
                    ),
                    // 配送路线
                    PolylineLayer(
                      polylines: [
                        Polyline(
                          points: [
                            LatLng(22.5431, 114.0579),
                            LatLng(22.5531, 114.0679),
                          ],
                          color: const Color(0xFFFF4141),
                          strokeWidth: 3,
                        ),
                      ],
                    ),
                    // 标记点
                    MarkerLayer(
                      markers: [
                        // 配送员位置
                        buildMarker(
                          LatLng(22.5431, 114.0579),
                          60,
                          true,
                        ),
                        // 目的地位置
                        buildMarker(
                          LatLng(22.5531, 114.0679),
                          20,
                          false,
                        ),
                      ],
                    ),
                  ],
                ),
                // 预计送达时间
                Positioned(
                  top: 16,
                  left: 0,
                  right: 0,
                  child: Center(
                    child: Container(
                      padding: const EdgeInsets.symmetric(
                        horizontal: 12,
                        vertical: 6,
                      ),
                      decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(16),
                        boxShadow: [
                          BoxShadow(
                            color: Colors.black.withOpacity(0.1),
                            blurRadius: 8,
                            offset: const Offset(0, 2),
                          ),
                        ],
                      ),
                      child: Text(
                        logisticsInfo['expectedDeliveryDate'],
                        style: const TextStyle(
                          fontSize: 12,
                          color: Color(0xFF333333),
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),

          // 物流信息
          Container(
            margin: const EdgeInsets.only(top: 12),
            padding: const EdgeInsets.all(16),
            color: Colors.white,
            child: Column(
              children: [
                // 快递单号
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      '${logisticsInfo['expressCompany']} ${logisticsInfo['trackingNumber']}',
                      style: const TextStyle(
                        fontSize: 14,
                        color: Color(0xFF666666),
                      ),
                    ),
                    GestureDetector(
                      onTap: () {
                        // 复制单号
                      },
                      child: Container(
                        padding: const EdgeInsets.symmetric(
                          horizontal: 12,
                          vertical: 4,
                        ),
                        decoration: BoxDecoration(
                          border: Border.all(
                            color: const Color(0xFFDDDDDD),
                          ),
                          borderRadius: BorderRadius.circular(12),
                        ),
                        child: const Text(
                          '复制单号',
                          style: TextStyle(
                            fontSize: 12,
                            color: Color(0xFF999999),
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
                const SizedBox(height: 12),
                // 收货地址
                Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Text(
                      '收货地址：',
                      style: TextStyle(
                        fontSize: 14,
                        color: Color(0xFF999999),
                      ),
                    ),
                    Expanded(
                      child: Text(
                        logisticsInfo['address'],
                        style: const TextStyle(
                          fontSize: 14,
                          color: Color(0xFF333333),
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),

          // 物流时间轴
          Expanded(
            child: Container(
              margin: const EdgeInsets.only(top: 12),
              color: Colors.white,
              child: LogisticsTimeline(
                timeline: logisticsInfo['timeline'],
              ),
            ),
          ),
        ],
      ),
    );
  }

  Marker buildMarker(LatLng point, double size, bool isDeliveryMan) {
    return Marker(
      point: point,
      child: Container(
        width: size,
        height: size,
        decoration: BoxDecoration(
          color: const Color(0xFFFF4141),
          shape: BoxShape.circle,
        ),
        child: isDeliveryMan
            ? const Icon(
                Icons.navigation,
                color: Colors.white,
                size: 24,
              )
            : null,
      ),
    );
  }
}
